<template>
  <a-card :bordered="false">
    <a-button
      type="primary"
      style="margin-bottom: 1rem"
      @click="showAddModal = true"
    >
      <template #icon> <icon-plus /> </template>
      <template #default> 添加 </template>
    </a-button>
    <a-modal
      v-model:visible="showAddModal"
      title="新增项目"
      @before-ok="handleAdd"
    >
      <a-form :model="raceItem">
        <a-form-item field="name" label="名称">
          <a-input v-model="raceItem.raceItemName" />
        </a-form-item>
        <a-form-item field="description" label="描述">
          <a-input v-model="raceItem.raceItemDescription" />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-table :columns="columns" :data="data" :pagination="paginationProps">
      <template #optional="{ record }">
        <a-button-group>
          <a-button
            @click="$modal.error({ title: '啥？', content: '还没写好' })"
            ><!--TODO edit-->
            <template #icon> <icon-edit /> </template>
          </a-button>
          <a-popover trigger="click">
            <a-button>
              <!--TODO delete-->
              <template #icon> <icon-delete /> </template>
            </a-button>
            <template #content>
              <p>确定删除？</p>
              <a-button type="primary" @click="handleDelete(record.raceItemId)">
                确定
              </a-button>
            </template>
          </a-popover>
        </a-button-group>
      </template>
    </a-table>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { IconPlus, IconEdit, IconDelete } from '@arco-design/web-vue/es/icon';
  import {
    addRaceItem,
    deleteRaceItem,
    getRaceList,
    RaceItemCreateDTO,
  } from '@/api/race';
  import { Message } from '@arco-design/web-vue';

  const columns = [
    {
      title: 'id',
      dataIndex: 'raceItemId',
      width: 60,
    },
    {
      title: '项目名称',
      dataIndex: 'raceItemName',
      width: 100,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      width: 200,
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      width: 200,
    },
    {
      title: '描述',
      dataIndex: 'raceItemDescription',
    },
    {
      title: '操作',
      slotName: 'optional',
      width: 96,
    },
  ];
  const data = ref([]);
  const paginationProps = ref({
    current: 1,
    total: 1,
  });
  const showAddModal = ref(false);
  const showEditModal = ref(false);
  const raceItem = ref({} as RaceItemCreateDTO);

  const handleAdd = (done: (closed: boolean) => void) => {
    addRaceItem(raceItem.value)
      .then((res) => {
        done(true);
      })
      .catch((err) => {
        Message.error('添加失败');
        done(true);
      })
      .then(() => {
        getRaceList({ pageSize: 100 }).then((res) => {
          data.value = res.data.records;
        });
      });
  };

  const handleEdit = (done: (closed: boolean) => void) => {
    done(true); // TODO
  };

  const handleDelete = (id: number) => {
    deleteRaceItem(id).then(() => {
      getRaceList().then((res) => {
        data.value = res.data.records;
      });
    });
  };

  getRaceList({ pageSize: 100 }).then((res) => {
    data.value = res.data.records;
    // console.log(data.value);
  });
</script>

<style scoped></style>
